<template>
  <div class="account fill" v-loading="loading">
    <!--没有user-->
    <template v-if="!user">
      <transition>
        <div class="fill" v-if="loginAction.step===0">
          <div class="section-title">请选择登录账户</div>
          <div class="pnt list flex-row flex-center">
            <div class="item-wrapper" v-for="item in userList" :key="item.id">
              <div class="item flex-col items-center" @click="handleLoginStep(item.id)">
                <el-avatar :src="item.avatar"/>
                <div class="name">{{ item.trueName || item.username }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="fill flex-col justify-start items-center" v-if="loginAction.step===1">
          <div class="section-title self-start"><el-link @click="handleBack(1)"><i class="el-icon-back"/>返回</el-link> </div>
          <div class="login-form  flex-col flex-center">
            <el-avatar :size="100" :src="loginAction.selectUser.avatar"/>

            <vs-input class="pnt" state="primary" disabled v-model="loginAction.selectUser.username"
                      placeholder="User name">
              <template #icon>
                <i class='iconfont icon-yonghu'></i>
              </template>
            </vs-input>
            <vs-input class="pnt" state="primary" v-model="loginAction.pwd" placeholder="密码">
              <template #icon>
                <i class='iconfont icon-mima'></i>
              </template>
            </vs-input>
            <vs-button
              block
              class="mnt"
              @click="handleLogin">
              登录
            </vs-button>
          </div>
        </div>
      </transition>
    </template>
    <!--已登录-->
    <template v-if="user">
      <div class="pl flex-col userinfo items-center">
        <el-avatar :size="150" :src="user.avatar"/>
        <div class="name">{{user.trueName||user.username}}</div>
        <div class="email">{{user.email}}</div>
        <div class="btns">
          <vs-button border color="success" @click="handleLogoff">注销</vs-button>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import {userApi} from "@/api/table/user"

export default {
  name: "ConfigAccount",
  data: () => ({
    userList: [],
    loading: false,
    loginAction: {
      step: 0,
      selectUser: null,
      pwd: ""
    }

  }),
  computed: {
    user() {
      return Object.keys(this.$store.state.user).length ? this.$store.state.user : null
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      userApi.getAll().then(ret => {
        this.userList = ret.data
        this.loading = false
      })
    },
    fetchUserDetail(id) {
      return userApi.getOne(id)
    },
    fetchLogin() {
      return userApi.login(this.loginAction.selectUser.username, this.loginAction.pwd)
    },
    // 返回按钮
    handleBack(step){
      if(step===1){
        this.loginAction = {
          step: 0,
          selectUser: null,
          pwd: ""
        }
      }
    },
    // 选择头像进入登录表单
    async handleLoginStep(id) {
      this.loading = true
      let ret = await this.fetchUserDetail(id)
      this.loginAction.selectUser = ret.data
      this.loading = false
      this.loginAction.step = 1
    },
    // 登录
    handleLogin() {
      if(!this.loginAction.pwd){
        this.$vs.notification({
          title: "提示",
          color: "danger",
          position: "top-center",
          text: "请输入密码"
        })
        return
      }
      this.loading = true
      this.fetchLogin().then(ret=>{
        this.loading = false
        if(ret.code===0){
          this.$msg.success("登录成功")
          console.log(ret)
          this.$store.commit("setUser", {...ret.data.userinfo, token:ret.data.token})
        }else{
          this.$msg.warning(ret.msg)
        }
      })
    },
    // 注销按钮
    handleLogoff() {
      this.loading = true
      setTimeout(()=>{
        this.loading = false
        this.$store.commit("setUser", {})
      }, 500)
    }

  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";

.section-title {
  font-size: $fz-n;
  color: $text-info;
  padding: $pn;
}

.list {
  .item-wrapper {
    width: 25%;
    padding: 0 5%;

    .item {
      border-radius: $mn;
      width: 100%;
      background-color: wheat;
      padding: $pn;
      position: relative;
      transition: all 0.2s;
      top: 0;
      cursor: pointer;

      &:hover {
        box-shadow: 0 2px 5px rebeccapurple;
        top: -2px;
      }

      .name {
        margin-top: $mn;
      }
    }
  }
}

.login-form {
  margin-top: $mlx;
}

.userinfo{
  >div{
    line-height: 1.5;
    color: $text-info;
  }
  .name{
    font-size: $fz-nx;
    font-weight: 600;
    color: $text-main;
  }
  .btns{
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
}
</style>
